<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <form class="vertical-form">
        <label>账号：</label>
        <input type="text" id="account" />
        <label>密码：</label>
        <input type="text" id="password" />
        <button type="submit">发请求</button>
      </form>
    </div>
    <script>
      // 使用fetch处理JSON
      const form = document.querySelector('.vertical-form')

      form.addEventListener('submit', async function (e) {
        e.preventDefault()
        const account = document.querySelector('#account')
        const password = document.querySelector('#password')
        const formdata = {
          account: account.value,
          password: password.value
        }

        const headers = new Headers()
        headers.append('content-type', 'application/json')
        const res = await fetch('http://127.0.0.1:8888/api/login', {
          method: 'POST',
          headers,
          body: JSON.stringify(formdata)
        })
        const data = await res.json()
        console.log(data)
      })
    </script>
    <style>
      .vertical-form {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .vertical-form label,
      .vertical-form input,
      .vertical-form button {
        margin-bottom: 10px;
      }
    </style>
  </body>
</html>
